import Vue from 'vue'

export default {
  namespaced: true,
  state: {
    loading: false,
    // 左侧导航菜单
    menu: JSON.parse(localStorage.getItem('menu')) || {
      collapse: false, // 收起、展开
      index: '', // 当前激活菜单的 index
    },
    page: {
      moduleId: ''
    },
    breadcrumb: JSON.parse(localStorage.getItem('breadcrumb')) || [
      {
        title: '职称评审管理系统',
        url: '/index'
      },
    ],
    tabs: JSON.parse(localStorage.getItem('tabs')) || {
      value: '/index', // 当前被选中的tab名称（即路由path）
      list: [ // 当前tab列表
        // {
        //   title: '首页',
        //   url: '/index',
        //   path: '/index', // 不含query部分
        //   indexPath: '',
        //   breadcrumb: [], // 面包屑，结构同上面的 state.breadcrumb
        // }
      ],
      //keepAlive: ['/'], // 允许缓存的页面组件名称（即路由path）列表
    },
  },
  mutations: {
    setModuleId(state, moduleId) {
      state.page.moduleId = moduleId;
    },
    // 记录导航菜单被选中项
    setMenuIndex(state, indexPath) {
      state.menu.index = indexPath
      localStorage.setItem('menu', JSON.stringify(state.menu))
    },
    // 添加/激活现有标签
    addTab(state, to) {
      // 标签页已存在则打开
      let isExist = false
      state.tabs.list.map(tab => {
        if (tab.path == to.path) {
          isExist = true
          tab.url = to.fullPath
          state.tabs.value = to.fullPath
          state.breadcrumb = [state.breadcrumb.shift(), ...tab.breadcrumb]
          return false
        }
      })
      if (isExist) return;

      // 计算面包屑
      let breadcrumb = []
      to.matched.map(m => {
        breadcrumb.push({
          title: m.name,
          url: m.path,
        })
      })
      state.breadcrumb = [state.breadcrumb.shift(), ...breadcrumb]
      try {
        let currentMatched = to.matched[to.matched.length - 1]
        state.tabs.list.push({
          title: currentMatched.name,
          url: to.fullPath,
          path: to.path,
          indexPath: state.menu.index,
          breadcrumb,
        })
        state.tabs.value = to.fullPath
        localStorage.setItem('tabs', JSON.stringify(state.tabs))
        localStorage.setItem('breadcrumb', JSON.stringify(state.breadcrumb))
      } catch (error) {
        console.log(error)
      }


      //console.log(state)
      //state.tabs.keepAlive.push(to.path)

    },
    // 激活现有标签
    clickTab(state, url) {
      state.tabs.list.map(tab => {
        if (tab.url == url) {
          Vue.prototype.vm.$router.replace(tab.path)
          state.tabs.value = tab.url
          state.breadcrumb = [state.breadcrumb.shift(), ...tab.breadcrumb]
          state.menu.index = tab.indexPath
          return false
        }
      })
    },
    // 收起/展开导航菜单
    menuCollapseToggle(state) {
      state.menu.collapse = !state.menu.collapse
      localStorage.setItem('menu', JSON.stringify(state.menu))
    },
    // 显示/隐藏加载状态
    toggleLoading(state) {
      state.loading = !state.loading
    },
    clearStore(state) {
      state.menu = {
        collapse: false, // 收起、展开
        index: '', // 当前激活菜单的 index
      };
      state.tabs.list = [];
      state.tabs.value = '/index'
      // state.breadcrumb=[{
      //   title:'通用评审系统',
      //   url:'/index'
      // }]
    },
    // clearTab(state){
    //   state.tabs.list=[];
    //   state.tabs.value='/index'
    // }
  },
  actions: {
    // 关闭标签
    closeTab({ state, commit }, url) {
      state.tabs.list.map((tab, i) => {
        if (tab.url == url) {
          Vue.delete(state.tabs.list, i)//删除对象属性，用Vue.delete 确保能触发更新
          //Vue.delete(state.tabs.keepAlive, i)
          // 如果关闭的是当前标签页，则激活左侧标签
          if (state.tabs.value == url && i > 0) {
            commit('clickTab', state.tabs.list[i - 1].url)
          } else if (i == 0 && state.tabs.list.length == 0) {
            let tab = {
              title: '首页',
              url: '/index',
              path: '/index', // 不含query部分
              indexPath: '',
              breadcrumb: [], // 面包屑，结构同上面的 state.breadcrumb
            }
            state.tabs.list.push(tab)
            commit('clickTab', state.tabs.list[0].url)
          }
        }
      })
    },

  },
  getters: {
    menuCollapse: state => state.menu.collapse,
    menuIndex: state => state.menu.index,
    breadcrumb: state => state.breadcrumb,
  }
}
